<template>
	<view class="submit_order">

		<!-- #ifndef MP-WEIXIN -->
		<my-navbar leftText="配送范围" @leftClick="leftClick"></my-navbar>
		<!-- #endif -->

		<view class="">
			<map class="bm-view" :latitude="lat" :longitude="lng" :polygons="polygons" :markers="markerList"
				:show-location="true" scale="14" enable-zoom="true" enable-scroll="true">
			</map>

		</view>
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';

	export default {
		data() {
			return {
				lng: 115.89352755,
				lat: 28.689578,
				markerList: [],
				polygons: [{
					//多边形的坐标数组
					points: [{
						"longitude": 100.789761,
						"latitude": 22.022137
					}, {
						"longitude": 100.789833,
						"latitude": 22.022136
					}, {
						"longitude": 100.790838,
						"latitude": 22.019582
					}, {
						"longitude": 100.794509,
						"latitude": 22.020163
					}, {
						"longitude": 100.792928,
						"latitude": 22.022182
					}, {
						"longitude": 100.789761,
						"latitude": 22.022137
					}, ],
					fillColor: "#55888888", //填充颜色
					strokeColor: "#FC5657", //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 1, //层级
				}]

			}
		},
		onLoad() {
			this.getData()
		},
		mounted() {

		},
		methods: {
			leftClick() {
				// #ifdef H5
				window.history.back(-1);
				// #endif 

				// #ifndef H5
				uni.navigateBack();
				// #endif
			},

			getData() {
				$https('GET', 'getUserInfo', {}, res => {
					if (res.data.errcode == 0) {
						this.lng = res.data.data.quadrants[0].lng
						this.lat = res.data.data.quadrants[0].lat

						res.data.data.quadrants.map(e => {
							this.markerList.push({
								latitude: e.lat,
								longitude: e.lng,
							});
						})
						var poly = [{
							points: this.markerList,
							fillColor: "#55888888", //填充颜色
							strokeColor: "#FC5657", //描边颜色
							strokeWidth: 2, //描边宽度
							zIndex: 1, //层级
						}];
						this.polygons = poly;

					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						})
					}
				})
			},


		},

	}
</script>

<style lang="scss" scoped>
	.submit_order {
		.status_bar {
			position: fixed;
			top: 0;
		}

		.top_title {
			position: fixed;
			width: 100%;
			// #ifndef MP-WEIXIN
			top: calc(var(--status-bar-height));
			// #endif
			// #ifdef MP-WEIXIN
			top: 0;
			// #endif
			background: rgb(246, 246, 246);
			align-items: center;
			height: 88rpx;
			padding: 0 30rpx;
			z-index: 9900;

			.custom-icon {
				font-size: 36rpx;
				color: #191919;
				margin-right: 36rpx;
				font-weight: 600;
			}

			.name {
				color: #191919;
				font-size: 36rpx;
				font-weight: 600;
			}

		}

	}

	.bm-view {
		width: 100%;
		height: 100vh;
	}
</style>
